<template>
    <div class="game-list-page">
        <div class="top">
            <div class="left">
                <a class="back-tit" @click="handlBack">
                    <span class="back"></span>{{ info.title }} <i>{{ info.num }}</i><span class="f-type ftp_2">短视频收藏夹</span>
                </a>
                <div class="desc-row">
                    {{ info.content }}
                </div>
            </div>
            <a class="fav-btn">已收藏</a>
        </div>
        <div class="sub-row">
           <div class="left">
                 <span class="img-box">
                    <img loading="lazy" src="https://img.gameui.net/avatar-54-45690b@1x36.webp" alt="">
                </span>
                <span class="uname">Cherish0314</span>
                <span class="time">更新于 6个小时前</span>
           </div>
            <div class="right">
                <div class="filter-bx">
                    <div class="seach-bx">
                        <form @submit.prevent="()=>{return false;}">
                            <input type="text" placeholder="搜索">
                        </form>
                    </div>
                    <!-- <div class="mk-cus-ddl">
                        <span class="cur">全部</span>
                        <div class="sub-dd-block">
                            <ul class="sub-ddls">
                                <li><a>全部</a></li>
                                <li><a>待审核</a></li>
                                <li><a>已通过</a></li>
                                <li><a>未通过</a></li>
                            </ul>
                        </div>
                    </div> -->
                </div>
                <!-- <DropDown class="mr20" :list="statusList" :showAll="true" :value.sync="params.status" :width="150" placeholder=""/> -->
            </div>
        </div>
        <!-- <div class="games"> -->
            <ul class="games-data" :class="[model]">
                <li v-for="(item, idx) in info.collectList" :key="idx" class="dx-vd-item"  @click="currentItem=item.sortVideo;showPlay=true">
                    <div class="main-box">
                        <img loading="lazy" :src="item.sortVideo.image" alt=""/>
                        <span class="play-icon"></span>
                    </div>
                    <div class="global-img-fun-pos">
                        <a class="hid-el fav-btn"></a>
                        <a class="hid-el global-parise-btn">0</a>
                    </div>
                    <a class="hid-el select-btn"></a>
                    <div class="con-mask hid-el"></div>
                    <a class="title hid-el">{{item.sortVideo.title}}</a>
                </li>
            </ul>
        <!-- </div> -->
    <PlayVideo v-if="showPlay" :data="currentItem" @close="showPlay=false"/>
    </div>
</template>

<script>

import PlayVideo from '@/components/playvideo'
import api from '@/api/api'
import DropDown from '@/components/dropdown'
export default {
    components:{DropDown,PlayVideo},
    data(){
        return{
            showPlay:false,
            currentItem:null,
            model: 'small',
            info:{
                collectList:[]
            },
            params:{
                status:''
            },
            statusList:[{value:'1',title:'全部'},{value:'2',title:'游戏'},{value:'3',title:'作品'}]
        }
    },
    methods:{
        handlBack(){
            this.$router.back();
        }
    },
    async mounted(){
      let res=await api.getExplorer(this.$route.params.fid);
      if(!res.data.collectList)res.data.collectList=[];
      this.info=res.data;
    }
}
</script>

<style scoped lang="less">
.game-list-page{
    .top{
        display: flex;
        justify-content:space-between;
        align-items: flex-start;
        .left{
            .back-tit{
                font-size:18px;
                font-weight:500;
                display: flex;
                align-items: center;
                .back{
                    width:20px;height:20px;
                    background:url('../../../assets/pro/icon_next_page_back.svg') no-repeat;
                    margin-right:3px;
                }
                i{
                    font-size:16px;
                    color:#5D5C5C;
                    font-style: normal;
                    margin-left:5px;
                }
                
                .f-type{
                    line-height: 20px;
                    font-size: 10px;
                    padding: 0px 4px;
                    border-radius: 3px;
                    display: inline-block;
                    position: relative;
                    overflow: hidden;
                    margin-left:5px;
                    color:#4A5A4B;
                    &:before{
                        content: '';
                        width: 100%;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        opacity: 0.14;
                        height: 100%;
                        background:rgba(54, 228, 36, 0.54);
                    }
                }
            }
            .desc-row{
                font-size:14px;
                color:#969696;
                margin-top:16px;
            }
        }
        .fav-btn{
            width:90px;
            text-align: center;
            border-radius:8px;
            line-height:40px;
            font-size:14px;
            background: #29272F;
            // box-shadow: 0px 5px 11px 0px rgba(18,17,20,0.4);
        }
    }
    .sub-row{
        margin-top:24px;
        display: flex;
        align-items:center;
        justify-content: space-between;
        margin-bottom:31px;
        .left{
            display: flex;
            align-items: center;
            .img-box{
                width:24px;height:24px;
                border-radius:24px;
                overflow: hidden;
            }
            .uname{
                margin-left:12px;
                font-size:14px;
                color:#fff;
                font-weight:600;
                border-right:1px solid #4B4B4B;
                padding-right:19px;
                margin-right:18px;
            }
            .time{
                color:#969696;
                font-size:12px;
            }
        }
        .right{
            display: flex;
            align-items: center;
            .seach-bx{
                width:215px;
                // margin-right:15px;
                input{
                    background:#29272F;
                    height:40px;
                    line-height:40px;
                    border-radius:8px;
                    border:none;
                    padding-left:36px;
                    color:#fff;
                    font-size:14px;
                    background-image:url('../../../assets/pro/header/search_icon.svg');
                    background-repeat:no-repeat;
                    background-position:14px center;
                    background-size:16px 16px;
                    width:100%;
                }
            }
        }
    }
    .games-data {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-gap: 20px;

    .dx-vd-item {
      // width:312px !important;
      height: 175px;
      // min-width:312px;
      border-radius: 16px;
      overflow: hidden;
      // margin-right:20px;
      position: relative;
      cursor: pointer;
      border:2px solid transparent;

      transition:.2s all linear;
      .hid-el {
        // display: none;
        opacity: 0;
      }

      &:hover {
        border-color:#11CCB1;
        cursor: pointer;

        a {
          >img {
            transform: scale(1.08);
          }
        }

        .hid-el {
          // display: inline-block;
          opacity: 1;

          transition: 0.1s all linear;
        }
      }

      .play-icon {
        background: url('../../../assets/pro/home_v_play.svg') no-repeat;
        background-position: center center;
        display: inline-block;
        width: 80px;
        height: 80px;
        position: absolute;
        z-index:1;
        left: calc((100% - 80px) / 2);
        top: calc((100% - 80px) / 2);
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        cursor: default;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      .global-img-fun-pos{
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .select-btn {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        top: 10px;
        background: url('../../../assets/pro/mutiple_select_pic.svg') no-repeat;
        background-size: cover;
        &.active {
        background: url('../../../assets/pro/mutiple_selected_pic.svg') no-repeat;
        background-size: cover;
        }
    }
      .main-box {
        display: inline-block;
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .title {
        background: url('../../../assets/pro/icon_video_transfer.svg') no-repeat;
        background-position: left center;
        background-size: 16px 16px;
        position: absolute;
        bottom: 11px;
        padding-left: 20px;
        left: 14px;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}









</style>